<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-02-15 17:58:43
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\layout\uiFlexbox\uiFlexbox.vue
 * CIMC-V2
-->
<template>
  <div ref="map" class="w-full h-full"></div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin } from '@ve/mixin'
  import * as echarts from 'echarts'
  // import { geoJson } from './420000.js'
  export default defineComponent({
    name: 'Map',
    mixins: [UiMixin],
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    mounted() {
      this.$nextTick(() => {
        let chartDom = this.$refs.map
        const myChart = echarts.init(chartDom)
        const COORDS_LINE = {
          宜昌市: [
            [111.15, 30.8],
            [108.2, 31.94],
          ],
        }
        let data = [
          {
            name: '宜昌市',
            value: 5,
          },
        ]
        let option = {
          backgroundColor: '#142C50',
          series: [
            {
              type: 'map',
              zoom: 1.2,
              z: 2,
              mapType: 'beijing',
              label: {
                show: true,
                textStyle: {
                  color: '#fff',
                },
              },
              emphasis: {
                label: {
                  show: true,
                },
                itemStyle: {
                  borderColor: '#EBF3F3',
                  borderWidth: 2,
                  areaColor: '#104272',
                },
              },
              itemStyle: {
                borderColor: '#ccc',
                borderWidth: 2,
                areaColor: '#104272',
              },
              data: data,
            },
            {
              type: 'lines',
              z: 3,
              coordinateSystem: 'geo',
              symbol: 'circle',
              symbolSize: [6, 0],
              color: '#17A597',
              opacity: 1,
              label: {
                show: true,
                position: 'end',
                formatter: [`宜昌市：2 单`, ``, `数量：2`].join('\n'),
                backgroundColor: '#104272',
                borderRadius: 4,
                align: 'center',
                padding: 10,
              },
              lineStyle: {
                type: 'solid',
                opacity: 1,
                color: '#17A597',
                curveness: 0.1,
              },
              data: data.map((item) => {
                return Object.assign(
                  {
                    coords: COORDS_LINE[item.name],
                  },
                  item
                )
              }),
            },
          ],
          geo: {
            geoIndex: 1,
            map: 'beijing',
            label: {
              show: false,
            },
            zoom: 1.2,
            animation: false,
          },
        }
        echarts.registerMap('beijing', require('@/assets/map_json/420000.json'))
        myChart.setOption(option, true)
      })
    },
  })
</script>
<style>
  .map {
    width: 100%;
    height: 100%;
  }
</style>
